<template>
  <div>
    <van-nav-bar title="问卷详情" left-text="返回" left-arrow @click-left="backAction"/>
    <van-cell>{{ this.cur_question.title }}</van-cell>

    <van-cell id="question-content">{{ cur_question.content }}</van-cell>
    <van-radio-group id="radio-group" v-model="cur_option" disabled>
      <van-radio v-for="question in cur_question.options" :key="question.index"
                 id="options" :name="question.id"> {{ question.content }}
      </van-radio>
    </van-radio-group>

    <van-progress id="progress-bar1" :percentage="(has_answer+1)/all_nums*100"
                  stroke-width="0"
                  text-color="green"
                  pivot-color="white"
                  :pivot-text="pivot_text"/>

    <van-progress id="progress-bar" :percentage="(has_answer+1)/all_nums*100"
                  :show-pivot="false"/>

    <van-progress id="progress-bar2" :percentage="100"
                  stroke-width="0"
                  text-color="grey"
                  pivot-color="white"
                  :pivot-text="pivot_text_all"/>
    <div>
      <van-button id="btn_pre" round @click="preQuestion">上一题</van-button>

      <van-button style="margin-left: 100px" id="btn_next" round @click="nextQuestion">下一题</van-button>
    </div>
  </div>

</template>

<script>
import Vue from "vue"
import questionList from "@/assets/questionList";
import {Button, Dialog, NavBar, Progress, Radio, RadioGroup} from "vant"

Vue.use(Progress)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Button)
Vue.use(NavBar)

export default {
  name: "ansDetail",
  data() {
    return {
      all_nums: null,
      has_answer: 0,

      survey_answer: null,

      question_type: 0,

      cur_option: null,
      cur_question: null,
      questions: null,

      pivot_text: null,
      pivot_text_all: null,
    }
  },
  created() {
    this.question_type = this.$route.params.question_type;
    this.survey_answer = this.$route.params.survey_answer;
    this.questions = questionList[this.question_type].content;
    this.cur_question = this.questions[this.has_answer];
    this.cur_option = parseInt(this.survey_answer[this.has_answer]);
    this.all_nums = this.questions.length;

    this.pivot_text = "第" + (this.has_answer + 1) + "题";
    this.pivot_text_all = "共" + (this.all_nums) + "题";
  },
  methods: {

    nextQuestion() {
      if (this.has_answer === this.all_nums) {
        Dialog.alert({
          title: "小提示",
          message: "这是最后一题啦，后面没有啦^-^"
        })
        return;
      }

      this.has_answer++;
      this.pivot_text = "第" + (this.has_answer + 1) + "题";
      this.cur_question = this.questions[this.has_answer];
      this.cur_option = parseInt(this.survey_answer[this.has_answer]);
    },

    preQuestion() {
      if (this.has_answer === 0) {
        Dialog.alert({
          title: "小提示",
          message: "这是第一题啦，前面没有啦^-^"
        })
        return;
      }

      this.has_answer--;
      this.pivot_text = "第" + (this.has_answer + 1) + "题";
      this.cur_question = this.questions[this.has_answer];
      this.cur_option = parseInt(this.survey_answer[this.has_answer]);
    },
    backAction() {
      history.back();
    }
  }
}
</script>

<style scoped>
div {
  align-content: center;
}

#radio-group {
  align-items: center;
  margin: 20px 50px 20px 20px;
}

#options {
  margin: 10px 10px 10px 10px;
}


#progress-bar {
  margin: 28px 20px 20px 20px;
}


#progress-bar1 {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>